<template>
  <div class="content">
    <navBar :navBar="navBar" :callback="godetail"></navBar>
    <div class="contentInner">
      <div class="type">
        <img
          src="../../assets/images/zichan/usdt.png"
          alt=""
          v-if="type == 'USDT'"
        />
        <img
          src="../../assets/images/quotation/btc.png"
          alt=""
          v-if="type == 'BTC'"
        />
        <img
          src="../../assets/images/quotation/eth.jpg"
          alt=""
          v-if="type == 'ETH'"
        />
        <span v-if="type == 'USDT'">{{ type }} {{ $t("提现") }}</span>
        <span v-if="type == 'CNY'">Bank {{ $t("提现") }}</span>
      </div>
      <!-- <div class="title" v-if="type == 'USDT'">链地址</div>
    <div class="tabs" v-if="type == 'USDT'">
      <div
        :class="tabid == 1 ? 'xuanzhong onetab' : 'wxuanzhong onetab'"
        @click="tabid = 1"
      >
        ERC20
      </div>
      <div
        :class="tabid == 2 ? 'xuanzhong onetab' : 'wxuanzhong onetab'"
        @click="tabid = 2"
      >
        TRC20
      </div>
      <div
        :class="tabid == 3 ? 'xuanzhong onetab' : 'wxuanzhong onetab'"
        @click="tabid = 3"
      >
        OMNI
      </div>
    </div> -->
      <div class="title">{{ type == 'CNY' ? $t("银行卡") : $t("提币地址") }}</div>  
	  <div @click="showPicker = true"><input type="text" v-model="address" :placeholder="$t('请选择')" disabled /></div>
	
	  <van-popup v-model="showPicker" position="bottom">
	  	<van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" :confirm-button-text="$t('确定')" :cancel-button-text="$t('取消')" />
	  </van-popup>
	  

     <!-- <van-popover
        v-model="showPopover"
        trigger="click"
        :actions="actions"
        @select="onSelect"
        placement="top"
      >
        <template #reference>
          <van-button>{{type == 'CNY' ? $t('选择银行卡') : $t("选择钱包地址") }}</van-button>
        </template>
      </van-popover> -->
      <div class="title">{{type == 'CNY' ? $t('提现金额') : $t("提币数量") }}</div>
      <input type="number" v-model="num" :placeholder="type == 'CNY' ? $t('请输入提现金额') : $t('请输入提币数量')" />
      <div class="canuse"  v-if=" type=='USDT' ">{{ $t("可用") }}{{  canuse }} {{ type }}</div>
      <div class="canuse" v-if=" type=='CNY' ">{{ $t("可用") }}{{ money_two }} USD</div>
      <div class="title">{{ $t("提现密码") }}</div>
      <input type="number" v-model="pwd" :placeholder="$t('请输入提现密码')" />
      <div class="title">{{ $t("手续费") }}</div>
      <input type="text" v-model="shouxu" disabled />
      <div class="btn">
        <div class="yuji" v-if="type == 'USDT'">
          {{ $t("预计到账数量") }}：{{ preArrival }}{{ type }}
        </div>
		<div class="yuji" v-if="type == 'CNY'">
		  {{ $t("预计到账数量") }}：{{ preArrival }}USD
		</div>
        <van-button type="info" size="large" @click="sub">{{
          $t("提交")
        }}</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import navBar from "@/components/navBar.vue";
import { Popover } from "vant";
import { Toast } from 'vant';
export default {
  name: "recharge",
  components: { navBar },
  data() {
    return {
      navBar: {
        back: true,
        title: this.$t("提现"),
        close: false,
        btn: "",
        isBlue: true,
      },
	  CNY:{
		  back: true,
		  title: this.$t("提现"),
		  close: false,
		  btn: "",
		  isBlue: true,
	  },
      tabid: 1,
      address: "",
      num: "",
      pwd: "",
      shouxu: "",
      type: "",
      info: {},
      canuse: [],
      preArrival: 0,
      showPopover: false,
	  showPicker:false,
      actions: [], //{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }
	  money_two:'',
	  columns : [],
	  ref:[]
    };
  },
  created() {
    this.type = this.$route.query.type;
	if(this.type == 'CNY') {
		this.navBar.title = this.$t('银行卡') + this.$t("提现");
	} else {
		this.navBar.title = this.type + this.$t("提现");
	}
    this.CNY.title = 'Bank' + this.$t("提现");
    this.info = JSON.parse(this.$route.query.info);
    this.shouxu = this.$t("手续费") + this.info.tibi_fee*100 + "%";
  },
  mounted() {
    this.getzichanlist();
    this.getUsdtList();
	this.select_bank();
  },
  watch: {
    num(val) {
      this.num = val;
      var a = this.num - this.num * this.info.tibi_fee;
      this.preArrival = this.getFloat(a, 4);
    },
  },
  methods: {
	Bank() {
		console.log(123);
	},
    godetail() {
      this.$router.push({
        name: "withdrawalDetails",
      });
    },
	onConfirm(value){
		this.address = value
		this.showPicker=false;
	},
	
	select_bank(){
		let params='';
		if(this.type=="CNY"){
			params="Bank"
		}else{
			params = this.type
		}
		$postAxios(api.getWalletAddr,{type:params}, (res) => {
			this.$toast.clear();
			if (res.code == 0) {
				let columnsData=[];
				res.data.forEach(function(item,index){
					columnsData.push(item.addr)
				})
				console.log(columnsData);
				this.columns = columnsData
				// console.log(columnsData);
			} else {
				this.$toast(this.$t(res.msg));
			}
		});
	},
    onSelect(action) {
		console.log(1111);
      this.address = action.addr;
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {},
    go(type) {},
    getFloat(number, n) {
      n = n ? parseInt(n) : 0;
      if (n <= 0) {
        return Math.round(number);
      }
      number = Math.round(number * Math.pow(10, n)) / Math.pow(10, n); //四舍五入
      number = Number(number).toFixed(n); //补足位数
      return number;
    },

    getUsdtList() {
      $postAxios(api.getWalletAddr, { type: this.type }, (res) => {
        if (res.code == 0) {
          for (var i of res.data) {
            i.text = i.name+i.link + "-" + i.addr;
            this.actions.push(i);
          }
          // console.log(this.actions);
        }
      });
    },
    getzichanlist() {
      $postAxios(api.getAssets, {}, (res) => {
		  // console.log(res.data,"res.data")
		this.money_two = res.data[1].money;
        for (var i of res.data) {
          if (i.EN_name == this.type) {
            this.canuse = i.money;
			console.log(this.canuse,"xxxxxxxxxxxxxxxx")
          }
        }
      });
    },
    sub() {
      if (!this.address) {
        this.$toast(this.$t("钱包地址不能为空"));
        return;
      }
	 
	  this.$toast.loading({
	  	duration: 0,
	  	message: "",
	  	forbidClick: true,
	  });
      $postAxios(
        api.withdrawal,
        {
          type: this.type,
          amount: this.num,
          qianbao_addr: this.address,
          pay_pwd: this.pwd,
        },
        (res) => {
		  this.$toast.clear();
		  var str = res.msg.indexOf('-') > 0 ? this.$t(res.msg.split('-')[0])+res.msg.split('-')[1] : this.$t(res.msg);
          this.$toast(str);
          if (res.code == 0) {
            this.num = "";
            this.address = "";
            this.pwd = "";
            this.$router.push({
              name: "withdrawalDetails",
            });
          }
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
	
.content {
  width: 100%;
  height: 100%;
  background: #ffffff;
  box-sizing: border-box;
  
  
  .contentInner {
    padding: 10px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 0;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .type {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    align-items: center;
    background-color: #edf0f7;
    border-radius: 15px;
    img {
      width: 14px;
      height: 14px;
    }
    span {
      font-size: 12px;
      color: #333333;
      font-weight: bold;
      padding-left: 10px;
    }
  }
  .title {
    padding: 20px 0 5px;
    font-size: 14px;
    color: #333333;
    font-weight: 500;
  }
  .tabs {
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0.5px solid #eff1f5;
    .onetab {
      padding: 7px 21px;
      border-radius: 5px;
      font-size: 14px;
    }
    .xuanzhong {
      background-color: #2979ff;
      border: 1px solid #2979ff;
      color: #ffffff;
    }
    .wxuanzhong {
      background-color: #edf0f7;
      color: #8d9fae;
    }
  }
  input {
    box-sizing: border-box;
    padding: 0 10px;
    width: 100%;
    height: 40px;
    border-radius: 2px;
    border: solid 0.5px #edf0f7;
    border-bottom: 0.5px solid #d8dce6;
    font-size: 14px;
    background-color: #ffffff;
  }
  .canuse {
    font-size: 12px;
    color: #333333;
    font-weight: bold;
    padding: 6px;
    border-bottom: solid 1px #f7f6fb;
  }
  .btn {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px 0 20px;
    .yuji {
      font-size: 12px;
      color: #007aff;
      padding-bottom: 10px;
    }
    .van-button--large {
      height: 40px !important;
    }
  }
}

</style>
<style lang="scss">
	.van-popover__action{
	  	width: auto !important;
	  	margin-left: 70px;;
	}
</style>
